<template>
    <view class="popup-context">
        <view class="win" v-if="p_type==='lottery'">
            <view class="win-icon"></view>
            <view class="win-title">恭喜中签</view>
            <view class="win-msg">
                <view class="p">请于{{ extData.grabPayAt|mouthFormat }}前支付 </view>
                <view class="p"> 超时未支付将取消中签资格</view>
            </view>
            <view class="btn-success pay" @click="onconfirm">立即付款</view>
            <view class="win-tips" @click="cancel">稍后支付</view>
        </view>
        <view class="grab" v-if="p_type==='grab'">
            <view class="grab-title">报名成功</view>
            <view class="grab-success"></view>
            <view class="grab-tips">
                <view class="p">抽签时间为{{extData.grabEndAt | dateFormat}}</view>
                <view class="p"> 结果将通过短信通知您</view>
            </view>
            <view class="btn-success ok" @click="cancel">好的</view>
        </view>
        <view class="fail" v-if="p_type==='fail'">
            <view class="fail-title">报名失败</view>
            <view class="fail-icon"></view>
            <view class="fail-tips">
                <view class="p">您的可用积分不足</view>
                <view class="p"> 快去邀请赚金豆再来抢购</view>
            </view>
            <view class="btn-fail ok" @click="cancel">好的</view>
        </view>
        <view v-if="p_type==='first'" class="first">
            <view class="first-title">优先抢购</view>
            <view class="first-logo">
                <u-image
                    :src="extData.coverImg"
                    width="184rpx"
                    height="184rpx"
                ></u-image>
            </view>
            <!--view class="first-logo" :style="{ background: extData.coverImg }"></view-->
            <view class="first-tips">当前拥有优先购资格卡 x 1</view>
            <view class="btn-confirm" @click="onconfirm">确认使用</view>
            <view class="btn-normal" @click="cancel">暂不使用</view>
        </view>
        <view class="real" v-if="p_type === 'real'">
            <view class="real-icon">
                <u-icon
                    name="https://img.ionepin.com/e175f1f150b726380c4f62d6d6842db5f0b2af0a.png"
                    width="225rpx"
                    height="225rpx"
                ></u-icon>
            </view>
            <view class="real-title">实名认证</view>
            <view class="real-msg">为保障您的账户安全，请先完成实名认证</view>
            <view class="real-btn" @click="$u.route('pages/identify/index')">去认证</view>
            <view class="real-normal" @click="cancel">稍后认证</view>
        </view>
        <view class="real" v-if="p_type === 'safePass'">
            <view class="real-icon">
                <u-icon
                    name="https://img.ionepin.com/e175f1f150b726380c4f62d6d6842db5f0b2af0a.png"
                    width="225rpx"
                    height="225rpx"
                ></u-icon>
            </view>
            <view class="real-title">设置交易密码</view>
            <view class="real-msg">为保障您的资金安全，请先设置交易密码</view>
            <view class="real-btn" @click="$u.route('pages/setting/setPassword')">去设置</view>
            <view class="real-normal" @click="cancel">稍后设置</view>
        </view>
        <view class="notice" v-if="p_type === 'notice'">
            <u-text
                :text="extData.title"
                size="40rpx"
                color="#000000"
                align="center"
            ></u-text>
            <view class="notice-context">
                {{ extData.content }}
            </view>
            <view class="notice-btn" @click="cancel">我知道了</view>
        </view>
        <view class="security" v-if="p_type === 'security'">
            <u-text
                text="安全验证"
                size="38rpx"
                align="center"
                margin="32rpx 0 17rpx 0"
            ></u-text>
            <u-input
                :placeholder="'请输入手机验证码'"
                border="none"
                type="number"
                fontSize="28rpx"
                color="#000000"
                v-model="security.code"
                :customStyle="{
                    margin: '40rpx 0 0 0',
                    padding: '25rpx 32rpx',
                    background: '#F8F8F8',
                    borderRadius: '4rpx',
                    fontWeight: 400
                }"
            >
                <template slot="suffix">
                    <u-code
                        ref="uCode"
                        @change="codeChange"
                        changeText="重新发送(Xs)"
                        keep-running
                        @end="end"
                    ></u-code>
                    <u-text
                        :text="security.tips"
                        @click="getCode"
                        size="24rpx"
                        :color="security.disenble? '#9DA1AD':'#27334E'"
                    >
                    </u-text>
                </template>
            </u-input>
            <u-input
                :placeholder="'请输入交易密码'"
                border="none"
                type="password"
                fontSize="28rpx"
                color="#000000"
                v-model="security.password"
                :customStyle="{
                    margin: '40rpx 0 0 0',
                    padding: '25rpx 32rpx',
                    background: '#F8F8F8',
                    borderRadius: '4rpx',
                    fontWeight: 400
                }"
            ></u-input>
            <view class="security-btn">
                <view class="security-btn-cancel" @click="cancel">取消</view>
                <view class="security-btn-confirm" @click="onsubmit">确认</view>
            </view>
        </view>
        <view class="off-the-shelf" v-if="p_type==='offTheShelf'">
            <view class="off-shelf-title">下架藏品</view>
            <view class="off-shelf-tips">请确认是否下架该藏品</view>
            <view class="off-shelf-btn">
                <view class="off-shelf-cancel" @click="cancel">取消</view>
                <view class="off-shelf-confirm" @click="onsubmit">确认</view>
            </view>
        </view>
        <view class="verify-code" v-if="p_type==='verifyCode'">
            <view class="verify-title">图形验证码</view>
            <view class="captcha">
                <u-input
                    placeholder="请输入计算结果"
                    border="surround"
                    v-model="captcha.value"
                    fontSize="28rpx"
                    :customStyle="{
                        boxSizing: 'border-box',
                        padding: '23rpx 32rpx 23rpx 13rpx',
                        height: '90rpx'
                    }"
                >
                    <u-image
                        width="180rpx"
                        height="70rpx"
                        slot="suffix"
                        :src="captcha.data.img"
                        @click="$u.throttle(getCaptchaData, 1500)"
                    ></u-image>
                </u-input>
            </view>
            <view style="overflow: hidden">
                <view class="captcha-reload" @click="$u.throttle(getCaptchaData, 1500)">太难了，换一个</view>
            </view>
            <view class="captcha-confirm" @click="$u.throttle(captchaConfirm, 1500)">确认</view>
        </view>
    </view>
</template>

<script>
    import { parseTime } from "@/untils/index"
    import { getCode, getCaptcha } from "@/config/api-java"
    export default {
        name: "index",
        props: {
            p_type: {
                type: String,
                default: "lottery"
            },
            extData: {
                type: Object,
                default: () => {}
            }
        },
        data() {
          return {
              security: {
                  disenble: false,
                  tips: "发送验证码",
                  code: null,
                  password: null
              },
              captcha: {
                  value: null,
                  data: {
                      img: null,
                      key: null
                  }
              }
          }
        },
        async created() {
            if (this.p_type === 'verifyCode') {
                await this.getCaptchaData()
            }
        },
        filters: {
            dateFormat(val) {
                return parseTime(val, "{y}.{m}.{d} {h}:{i}")
            },
            mouthFormat(val) {
                return parseTime(val, "{m}.{d} {h}:{i}")
            }
        },
        methods: {
            cancel() {
                this.$emit("cancel")
            },
            onconfirm() {
                this.$emit("confirm")
            },
            async captchaConfirm() {
                await getCode({mobile: this.extData.mobile, text: this.captcha.value, key: this.captcha.data.key})
                this.$emit("confirm")
            },
            codeChange(text) {
                this.security.tips = text
            },
            async getCode() {
                if (this.security.disenble) {
                    return
                }
                const res = await getCode({mobile: this.$store.getters.mobile})
                uni.$u.toast('验证码已发送');
                this.$refs.uCode.start();
                this.security.disenble = true
            },
            end() {
                this.security.disenble = false
            },
            onsubmit() {
                this.$emit("confirm", {code: this.security.code, password: this.security.password})
            },
            async getCaptchaData() {
                const res = await getCaptcha()
                this.captcha.data = res
            }
        }
    }
</script>

<style lang="scss" scoped>
    .popup-context {
        .win {
            box-shadow: 0 0 13rpx 0 #999999;
            border-radius: 18rpx;
            box-sizing: border-box;
            padding: 40rpx 0 58rpx 0;
            .win-icon {
                background: url("https://img.ionepin.com/bc9b23f0ad6eabf3308c8c6d784c6597d75621da.png") no-repeat;
                background-size: 100% 100%;
                width: 456rpx;
                height: 290rpx;
                margin: 0 auto;
            }
            .win-title {
                font-size: 42rpx;
                font-weight: bold;
                color: #356CE7;
                text-align: center;
            }
            .win-msg {
                //width: 308rpx;
                height: 88rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: #4A4A4A;
                margin: 30rpx auto 0 auto;
                text-align: center;
                .p {
                    line-height: 1.5;
                }
            }
            .win-tips {
                font-size: 26rpx;
                font-weight: 400;
                color: #356CE7;
                text-align: center;
                margin-top: 37rpx;
            }
            .pay {
                margin: 50rpx auto 0 auto;
                font-size: 32rpx;
                color: #FFFFFF;
            }
        }
        .grab {
            padding: 58rpx 38rpx;
            .grab-title {
                font-size: 38rpx;
                font-family: PingFang-SC-Bold, PingFang-SC;
                font-weight: bold;
                color: #000000;
                margin-top: 10rpx;
                margin-bottom: 72rpx;
                text-align: center;
            }
            .grab-success {
                background: url("https://img.ionepin.com/80ff342854f8f5350d92fdd7e9e3d91d8abb8b06.png") no-repeat;
                background-size: 100% 100%;
                width: 128rpx;
                height: 128rpx;
                margin: 0 auto;
            }
            .grab-tips {
                height: 88rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: #4A4A4A;
                margin: 72rpx auto 56rpx auto;
                text-align: center;
                .p {
                    line-height: 1.5;
                }
            }
            .ok {
                font-size: 32rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }
        }

        .fail {
            padding: 58rpx 38rpx;
            .fail-title {
                font-size: 38rpx;
                font-family: PingFang-SC-Bold, PingFang-SC;
                font-weight: bold;
                color: #000000;
                margin-top: 10rpx;
                margin-bottom: 72rpx;
                text-align: center;
            }
            .fail-icon {
                background: url("https://img.ionepin.com/f21157d4ade2e2403c521d9ed1e9def993d4aa44.png") no-repeat;
                background-size: 100% 100%;
                width: 128rpx;
                height: 128rpx;
                margin: 0 auto;
            }
            .fail-tips {
                height: 88rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: #4A4A4A;
                margin: 72rpx auto 56rpx auto;
                text-align: center;
                .p {
                    line-height: 1.5;
                }
            }
            .ok {
                font-size: 32rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
            }
        }
        .first {
            padding: 67rpx 44rpx 41rpx 38rpx;
            .first-title {
                font-size: 38rpx;
                font-weight: bold;
                color: #000000;
                text-align: center;
            }
            .first-logo {
                display: flex;
                justify-content: center;
                margin: 78rpx auto 0 auto;
            }
            .first-tips {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #4A4A4A;
                text-align: center;
                margin-top: 40rpx;
                margin-bottom: 32rpx;
            }
            .btn-confirm {
                height: 86rpx;
                background: #000000;
                border-radius: 8rpx;
                font-size: 32rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                line-height: 86rpx;
            }
            .btn-normal {
                margin-top: 37rpx;
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #4A4A4A;
                text-align: center;
            }
        }
        .btn-success {
            width: 478rpx;
            height: 86rpx;
            background: linear-gradient(214deg, #FFB4D3 0%, #AB6DFF 21%, #696CFF 61%, #74E3FF 100%);
            border-radius: 44rpx;
            border: 1rpx solid #0091FF;
            font-weight: 400;
            text-align: center;
            line-height: 86rpx;
        }
        .btn-fail {
            //width: 478px;
            height: 86rpx;
            background: #000000;
            border-radius: 44rpx;
            text-align: center;
            line-height: 86rpx;
        }
        .real {
            padding: 56rpx 40rpx 40rpx 40rpx;
            .real-icon {
                width: 225rpx;
                margin: auto;
            }
            .real-title {
                margin-top: 46rpx;
                font-size: 38rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                line-height: 1.5;
                text-align: center;
            }
            .real-msg {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 1.5;
                margin-top: 24rpx;
            }
            .real-btn {
                height: 88rpx;
                background: #6985FF;
                border-radius: 4px;
                font-size: 30rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                line-height: 88rpx;
                margin-top: 56rpx;
            }
            .real-normal {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                margin-top: 32rpx;
                text-align: center;
            }
        }
        .notice {
            padding: 69rpx 45rpx 40rpx 45rpx;
            .notice-context {
                margin-top: 45rpx;
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #4A4A4A;
                text-indent: 2em;
            }
            .notice-btn {
                height: 88rpx;
                background: #6985FF;
                border-radius: 44rpx;
                font-size: 30rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                line-height: 88rpx;
                margin-top: 60rpx;
            }
        }
        .security {
            padding: 26rpx;
            .security-btn {
                display: flex;
                margin-top: 120rpx;
                .security-btn-cancel {
                    border-radius: 4rpx;
                    border: 1px solid #979797;
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    line-height: 88rpx;
                    flex: 1;
                    text-align: center;
                    margin-right: 12rpx;
                }
                .security-btn-confirm {
                    flex: 1;
                    background: #000000;
                    border-radius: 4rpx;
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 88rpx;
                    margin-left: 12rpx;
                }
            }
        }
        .off-the-shelf {
            padding: 40rpx 34rpx;
            .off-shelf-title {
                font-size: 38rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                text-align: center;
                margin-top: 40rpx;
            }
            .off-shelf-tips {
                margin-top: 46rpx;
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                text-align: center;
            }
            .off-shelf-btn {
                display: flex;
                margin-top: 94rpx;
                .off-shelf-cancel {
                    border-radius: 4rpx;
                    border: 1px solid #979797;
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #000000;
                    line-height: 88rpx;
                    flex: 1;
                    text-align: center;
                    margin-right: 12rpx;
                }
                .off-shelf-confirm {
                    flex: 1;
                    background: #000000;
                    border-radius: 4rpx;
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 88rpx;
                    margin-left: 12rpx;
                }
            }
        }
        .verify-code {
            overflow: hidden;
            .verify-title {
                text-align: center;
                font-size: 38rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                margin-top: 68rpx;
                text-align: center;
            }
            .captcha {
                padding: 57rpx 34rpx 12rpx 34rpx;
            }
            .captcha-reload {
                float: right;
                display: block;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #356CE7;
                margin-right: 67rpx;
            }
            .captcha-confirm {
                height: 88rpx;
                background: #000000;
                margin-top: 55rpx;
                font-size: 30rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                text-align: center;
                line-height: 88rpx;
            }
        }
    }
</style>
